<!--
 * @Author: yfp
 * @Date: 2024-03-30 20:00:53
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-08-09 21:20:23
 * @Description: 
-->
<template>
  <div class="chat-room">
    <el-container>
      <el-aside class="chat-aside">
        <div class="tips_class"><span></span> 模型配置管理</div>
        <div>
          <el-button type="primary" class="button_class" @click="addData"><span>+</span> 新建设备型号</el-button>
        </div>
        <div v-for="item in lists" class="tag_box">
          <p>{{ item.name }}</p>
          <el-tag v-for="tag in item.btn" :type="tag.type" style="cursor: pointer;" class="tag_class">{{ tag.name
          }}</el-tag>
        </div>

      </el-aside>
      <el-container class="chat-container">
        <el-header class="chat-header">
          <el-input v-model="input2" placeholder="搜索应用" :prefix-icon="Search" />
          <div>
            <el-button @click="changeAll(1)">实时告警</el-button>
            <el-button @click="changeAll(2)">历史告警</el-button>
          </div>
        </el-header>
        <el-main class="chat-main">
          <div v-for="item in allData" class="data_box">
            <div class="top_class margins">
              <p style="cursor: pointer;" @click="selectName(item)">{{ item.name }}</p>
              <!-- <p v-if="index != 0">{{ item.name }}</p> -->
              <el-popover placement="top-start" title="" width="60" trigger="hover" popper-class="popper_class">
                <template #reference>
                  <el-icon>
                    <More />
                  </el-icon>
                </template>
                <div class="pointer" @click="selectName(item)">编辑</div>
                <div class="pointer reds" @click="deleteName(item)">删除</div>
              </el-popover>

            </div>
            <div class="tag_box margins">
              <el-tag v-for="tags in item.tagList" :type="tags.type" class="tag_class">{{ tags.name }}</el-tag>
            </div>
            <p class="msg_class margins">{{ item.msg }}</p>
            <div class="bottom_class">
              <el-tag v-if="item.state === '已生效'" type="success">{{ item.state }}</el-tag>
              <el-tag v-if="item.state === '未生效'" type="warning">{{ item.state }}</el-tag>
              <p class="grays">{{ item.text }}</p>
              <p class="line grays">{{ item.time }} 更新</p>
              <p class="line grays">识别次数 {{ item.count }}</p>
            </div>
          </div>
        </el-main>
        <el-footer class="chat-footer">
          <div class="page-box">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper" :total="alarmTotal" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
const emit = defineEmits(["selectTab", "selectName", "addData"]);
import { Search } from '@element-plus/icons-vue'
import hisRecord from "@/api/hisRecord";

const currentPage = ref(1);
const pageSize = ref(20);
let alarmTotal = ref(8);
const props = defineProps({
  rowCode: {
    type: String,
    default() {
      return "";
    },
  },
  refreshState: {
    type: String,
    default() {
      return "false";
    },
  }
});
const getListDataFun = () => {
  hisRecord.getLisData().then((res) => {
    allData.value = []
    console.log('reslist', res.data.data_page.data)
    for (let key in res.data.data_page.data) {
      allData.value.push(res.data.data_page.data[key])
    }
  }).catch((err) => {
    console.log(err)
  });
}
onMounted(() => {
  getListDataFun()
  // let obj = {}
  // allData.value.forEach(item => {
  //   obj[item.name] = item
  // })
  // hisRecord.setListData({ data_page: obj }).then((res) => {
  // }).catch((err) => {
  //   console.log(err)
  // });
})

const lists = ref([
  {
    name: '事件类型',
    btn: [
      { name: '定值修改', type: '' },
    ]
  },
  {
    name: '保护版本',
    btn: [
      { name: '12版保护', type: 'success' },
      { name: '18版保护', type: 'success' },
    ]
  },
  {
    name: '大模型基座',
    btn: [
      { name: '大瓦特', type: 'danger' },
    ]
  },
  {
    name: '模型状态',
    btn: [
      { name: '已生效', type: 'success' },
      { name: '未生效', type: 'warning' },
    ]
  }
])
const allData = ref([
  {
    name: 'PCS-931N5Y 保护定值修改',
    code: 'PCS-931N5Y',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '12版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: 'PCS-931N5Y保护定值修改模型，基于大瓦特模型底座构建，通过设计结构化的提示工程界面，自动生成提示工程指令，进一步提升识别准确率。',
    state: '已生效',
    text: '模型状态',
    time: '2024-07-15',
    count: 2224
  },
  {
    name: 'PCS-931A5N 保护定值修改',
    code: 'PCS-931A5N',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '18版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: 'PCS-931A5N定值修改告警识别模型，专为PCS-931A5N设备设计，支持问答对导出，适用于大模型微调及提示工程。',
    state: '已生效',
    text: '模型状态',
    time: '2024-07-01',
    count: 14
  },
  {
    name: 'PCS-931A5NZ 保护定值修改',
    code: 'PCS-931A5NZ',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '18版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: 'PCS-931A5NZ保护定值修改模型适用于18版保护PCS-931A5NZ，依托大瓦特模型底座，具有更好的上下文语义理解能力。',
    state: '已生效',
    text: '模型状态',
    time: '2024-06-25',
    count: 132
  },
  {
    name: 'PCS-931N2 保护定值修改',
    code: 'PCS-931N2',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '12版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: 'PCS-931N2定值修改信号模型基于大瓦特底座能力，能够从海量告警信号中识别出保护定值修改信号，通过提示工程指令，提高模型泛化能力。',
    state: '已生效',
    text: '模型状态',
    time: '2024-06-20',
    count: 32
  },
  {
    name: 'PCS-931C5N 保护定值修改',
    code: 'PCS-931C5N',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '18版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: '专为PCS-931C5N保护装置打造的定值修改识别模型，构建与大瓦特模型之上，拥有更好的时序特征、事件特征理解能力，支持问答对导出，大大减少人工标注数据。',
    state: '未生效',
    text: '模型状态',
    time: '2024-05-10',
    count: 4
  },
  {
    name: 'PCS-931A2-N 保护定值修改',
    code: 'PCS-931A2-N',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '12版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: 'PCS-931A2N保护定值修改模型，专为12版保护设计，支持通过提示工程界面在线优化模型功能，快速应对用户修改需求，具备高度的灵活性和易用性。',
    state: '未生效',
    text: '模型状态',
    time: '2024-05-07',
    count: 13
  },
  {
    name: 'PCS-931A5-DG-N 保护定值修改',
    code: 'PCS-931A5-DG-N',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '18版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: '  PCS-931A5-DG-N 保护定值修改模型是用于识别PCS-931A5-DG-N保护装置定值修改告警信号的专用模块，基于大瓦特模型底座构建，具有更好的上下文语义理解能力。修改保护定值...',
    state: '已生效',
    text: '模型状态',
    time: '2024-05-04',
    count: 163
  },
  {
    name: 'PCS-931C5-DG-N 保护定值修改',
    code: 'PCS-931C5-DG-N',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '18版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: 'PCS-931C5-DG-N保护定值修改模型是用于识别PCS-931C5-DG-N保护装置定值修改告警信号的专用模块，基于大瓦特模型底座构建，具有更好的上下文语义理解能力。',
    state: '已生效',
    text: '模型状态',
    time: '2024-04-15',
    count: 793
  }
])
const handleSizeChange = (val) => {

};
const handleCurrentChange = (val) => {

};
const addData = () => {
  emit("addData");
}
// watch(props.rowCode, (newV, oldV) => {
//   console.log(newV, oldV, '===============================0ppppp')
// })

watch(() => props.refreshState, (value) => {
  console.log('value', value)
  getListDataFun()
}, {
  immediate: true
})

const changeAll = (num) => {
  emit("selectTab", num);
}
const selectName = (row) => {
  console.log('row', row)
  emit("selectName", row);
}
const deleteName = (val) => {
  console.log('val', val)
  hisRecord.getLisData().then((res) => {
    console.log('reslist', res.data.data_page.data)
    let resData = res.data.data_page.data
    for (let key in resData) {
      console.log('key', key, val.name)
      if (key === val.name) {
        console.log('key', key)
        delete resData[key]
      }
    }


    hisRecord.setListData({ data_page: resData }).then((res) => {
      console.log('res setover', res)
      getListDataFun()
    }).catch((err) => {
      console.log(err)
    });

  }).catch((err) => {
    console.log(err)
  });
}
</script>

<style scoped>
.chat-room {
  background-color: #F2F3F5;
  width: 100vw;
  height: 100vh;
}

.chat-footer {
  height: 60px !important;
  background-color: #fff;
  ;
}

.chat-header {
  height: 60px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;

  .el-input {
    width: 40%;
  }

  div {
    width: 200px;
    text-align: right;

    .el-button {
      background-color: #e7e7e7
    }
  }
}

.chat-container {
  padding: 18px;
  box-sizing: border-box;
}

.chat-aside {
  margin: 10px 0 10px 10px;
  background-color: #fff;
  width: 250px;
  text-align: left;
  height: calc(100vh - 20px);
  padding: 10px;

  .tips_class {
    border-left: 5px solid #409eff;
    padding-left: 20px;
    margin: 10px 20px 10px 0;
    font-size: 20px;
    font-weight: bold;
  }

  .button_class {
    border-radius: 5px;
    margin: 10px 0;
    padding: 15px;
    width: 100%;
    text-align: left;

    span {
      font-size: 20px;
      margin-right: 10px;

    }
  }

  .tag_box {
    margin: 10px 0;

    p {
      font-weight: bold;
    }

    .tag_class {
      margin-top: 10px;
      margin-right: 10px;
    }
  }

}

.chat-main {
  padding: 0;
  position: relative;
  overflow: auto;
  height: calc(100vh - 170px);
  margin-bottom: 20px;
}

.data_box {
  background-color: #fff;
  width: 49.5%;
  float: left;
  margin-bottom: 1%;
  padding: 10px;
  overflow: auto;

  .margins {
    margin-bottom: 15px;
  }

  .top_class {
    display: flex;
    justify-content: space-between;

    p {
      font-size: 24px;
      font-weight: bold;
    }
  }

  .msg_class {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    /* font-weight: bold; */
    color: #1d2129;
    height: 50px;
  }

  .tag_class {
    margin-right: 10px;
  }

  .bottom_class {
    display: flex;
    align-items: center;

    p {
      padding: 0 20px;
    }

    .grays {
      font-size: 14px;
      color: gray;
    }

    .line {
      border-left: 1px solid gray;
    }
  }
}

.data_box:nth-child(odd) {
  margin-right: 1%;
}

.pointer {
  cursor: pointer;
  text-align: center;
  padding: 2px;
}

.reds {
  color: red;
}

.page-box {
  margin: 15px 0;
  display: flex;
  justify-content: flex-end;
}



/* 设置滚动条宽度 */
::-webkit-scrollbar,
::-ms-scrollbar,
::-moz-scrollbar,
::-o-scrollbar {
  width: 5px;
}
</style>
